<template>
  <div class="hotGoods">
    <h2>热卖商品</h2>
    <van-grid :border="true" :column-num="2" :clickable="true">
      <van-grid-item v-for="item of hotGoods" :key="item.goodsId">
        <router-link :to="{path:'/details',query:{id:item.goodsId}}">
          <van-image :src="$filterImage(item.image)" lazy-load />
          <slot>
            <p>{{item.name}}</p></slot>
            <slot>
            <p>{{item.price | toFixed | rmb}}</p>
          </slot>
        </router-link>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotGoods: []
    };
  },
  created() {
    this.$eventBus.$on("getIndexInfo", res => {
      // console.log(res);
      this.hotGoods = res.hotGoods;
    });
  }
};
</script>

<style lang="scss">
@import "@/style/home/hotGoods";
</style>